<template>
  <div class="color-picker-container">
    <a-card title="颜色转换器" :bordered="false">
      <div class="color-section">
        <!-- 颜色选择器 -->
        <a-row :gutter="[16, 16]" class="color-input-row">
          <a-col :span="8">
            <div class="color-preview" :style="{ backgroundColor: selectedColor }"></div>
          </a-col>
          <a-col :span="8">
            <a-input type="color" v-model:value="selectedColor" @input="handleColorChange" size="large" />
          </a-col>
          <a-col :span="8">
            <a-input v-model:value="hexInput" placeholder="输入十六进制颜色值 (例如: #1ea54c)" @change="handleHexInput" :status="hexInputStatus"> </a-input>
          </a-col>
        </a-row>

        <!-- 颜色格式展示 -->
        <a-divider>颜色格式</a-divider>

        <a-row :gutter="[16, 16]">
          <a-col :span="24">
            <a-descriptions :column="1">
              <a-descriptions-item label="HEX">
                <a-input-group compact>
                  <a-input v-model:value="colorFormats.hex" readonly style="width: calc(100% - 40px)" />
                  <a-button type="link" @click="copyToClipboard(colorFormats.hex)">
                    <template #icon><CopyOutlined /></template>
                  </a-button>
                </a-input-group>
              </a-descriptions-item>

              <a-descriptions-item label="RGB">
                <a-input-group compact>
                  <a-input v-model:value="colorFormats.rgb" readonly style="width: calc(100% - 40px)" />
                  <a-button type="link" @click="copyToClipboard(colorFormats.rgb)">
                    <template #icon><CopyOutlined /></template>
                  </a-button>
                </a-input-group>
              </a-descriptions-item>

              <a-descriptions-item label="HSL">
                <a-input-group compact>
                  <a-input v-model:value="colorFormats.hsl" readonly style="width: calc(100% - 40px)" />
                  <a-button type="link" @click="copyToClipboard(colorFormats.hsl)">
                    <template #icon><CopyOutlined /></template>
                  </a-button>
                </a-input-group>
              </a-descriptions-item>

              <a-descriptions-item label="HWB">
                <a-input-group compact>
                  <a-input v-model:value="colorFormats.hwb" readonly style="width: calc(100% - 40px)" />
                  <a-button type="link" @click="copyToClipboard(colorFormats.hwb)">
                    <template #icon><CopyOutlined /></template>
                  </a-button>
                </a-input-group>
              </a-descriptions-item>

              <a-descriptions-item label="LCH">
                <a-input-group compact>
                  <a-input v-model:value="colorFormats.lch" readonly style="width: calc(100% - 40px)" />
                  <a-button type="link" @click="copyToClipboard(colorFormats.lch)">
                    <template #icon><CopyOutlined /></template>
                  </a-button>
                </a-input-group>
              </a-descriptions-item>

              <a-descriptions-item label="CMYK">
                <a-input-group compact>
                  <a-input v-model:value="colorFormats.cmyk" readonly style="width: calc(100% - 40px)" />
                  <a-button type="link" @click="copyToClipboard(colorFormats.cmyk)">
                    <template #icon><CopyOutlined /></template>
                  </a-button>
                </a-input-group>
              </a-descriptions-item>
            </a-descriptions>
          </a-col>
        </a-row>
      </div>
    </a-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { message } from 'ant-design-vue'
import { CopyOutlined } from '@ant-design/icons-vue'
import tinycolor from 'tinycolor2'

// 默认颜色
const defaultColor = '#1ea54c'
const selectedColor = ref(defaultColor)
const hexInput = ref(defaultColor.substring(1)) // 去掉#号
const hexInputStatus = ref('')

// 颜色格式对象
const colorFormats = reactive({
  hex: defaultColor,
  rgb: '',
  hsl: '',
  hwb: '',
  lch: '',
  cmyk: ''
})

// 处理十六进制输入
const handleHexInput = (e) => {
  const value = e.target.value
  // 验证十六进制颜色值格式
  const hexRegex = /^[0-9A-Fa-f]{6}$/

  if (!hexRegex.test(value)) {
    hexInputStatus.value = 'error'
    return
  }

  hexInputStatus.value = ''
  const newColor = `#${value}`
  selectedColor.value = newColor
  handleColorChange({ target: { value: newColor } })
}

// 处理颜色变化
const handleColorChange = (event) => {
  const color = event.target.value
  if (!color) return

  const tColor = tinycolor(color)
  const rgb = tColor.toRgb()

  // 更新各种格式
  colorFormats.hex = tColor.toHexString()
  hexInput.value = tColor.toHex() // 更新十六进制输入框的值
  colorFormats.rgb = tColor.toRgbString()
  colorFormats.hsl = tColor.toHslString()

  // 计算 HWB
  const h = tColor.toHsl().h
  const w = (Math.min(rgb.r, rgb.g, rgb.b) / 255) * 100
  const b = (1 - Math.max(rgb.r, rgb.g, rgb.b) / 255) * 100
  colorFormats.hwb = `hwb(${Math.round(h)} ${Math.round(w)}% ${Math.round(b)}%)`

  // 计算 LCH (简化版本)
  const l = ((0.2126 * rgb.r + 0.7152 * rgb.g + 0.0722 * rgb.b) / 255) * 100
  const c = Math.sqrt(Math.pow(rgb.r - rgb.g, 2) + Math.pow(rgb.g - rgb.b, 2) + Math.pow(rgb.b - rgb.r, 2)) / Math.sqrt(3)
  const hue = (Math.atan2(rgb.g - rgb.b, rgb.r - rgb.g) * 180) / Math.PI
  colorFormats.lch = `lch(${Math.round(l)}% ${Math.round(c)} ${Math.round(hue)})`

  // 计算 CMYK
  // RGB 转 CMYK 的计算
  const r = rgb.r / 255
  const g = rgb.g / 255
  const bl = rgb.b / 255

  const k = 1 - Math.max(r, g, bl)
  const cyan = k === 1 ? 0 : (1 - r - k) / (1 - k)
  const magenta = k === 1 ? 0 : (1 - g - k) / (1 - k)
  const yellow = k === 1 ? 0 : (1 - bl - k) / (1 - k)

  colorFormats.cmyk = `device-cmyk(${Math.round(cyan * 100)}% ${Math.round(magenta * 100)}% ${Math.round(yellow * 100)}% ${Math.round(k * 100)}%)`
}

// 复制到剪贴板
const copyToClipboard = async (text) => {
  try {
    await navigator.clipboard.writeText(text)
    message.success('已复制到剪贴板')
  } catch (err) {
    message.error('复制失败')
  }
}

// 初始化颜色格式
handleColorChange({ target: { value: defaultColor } })
</script>

<style scoped>
.color-picker-container {
  padding: 24px;
  max-width: 800px;
  margin: 0 auto;
}

.color-section {
  padding: 20px;
}

.color-input-row {
  display: flex;
  align-items: center;
}

.color-preview {
  width: 100%;
  height: 40px;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
}

:deep(.ant-input-group-addon) {
  padding: 0;
}

:deep(.ant-btn-link) {
  padding: 0 8px;
}

:deep(.ant-input[type='color']) {
  height: 40px;
  padding: 2px;
  cursor: pointer;
}

:deep(.ant-input[type='color']::-webkit-color-swatch-wrapper) {
  padding: 0;
}

:deep(.ant-input[type='color']::-webkit-color-swatch) {
  border: none;
  border-radius: 2px;
}

:deep(.ant-input-affix-wrapper) {
  font-family: monospace;
}

:deep(.ant-input) {
  height: 40px;
}

:deep(.ant-descriptions-item-label) {
  display: flex;
  align-items: center;
  height: 40px; /* 与输入框高度保持一致 */
  line-height: 40px;
  width: 80px; /* 设置固定宽度 */
  justify-content: flex-start; /* 文字左对齐 */
  padding-right: 16px; /* 与右侧内容保持适当间距 */
}
</style>
